<template>
  <main>
    <a-layout-header style="background: #fff; padding: 0; height: 80px" />
    <section class="fixed top-0 right-0 box bg-white h-[80px] z-10 dark:bg-[#151515] shadow-lg">
      <header
        class="flex justify-between w-full h-12 items-center border-b border-solid border-gray-100 dark:border-gray-600"
      >
        <div>
          <div
            class="dark-icon px-2 hover:bg-gray-100 text-dark-900 h-full text-lg items-center cursor-pointer flex enter-x"
            @click="packUp"
          >
            <menu-fold-outlined v-show="!props.isPackUp" />
            <menu-unfold-outlined v-show="props.isPackUp" />
          </div>
        </div>
        <right></right>
      </header>
      <use-footer></use-footer>
    </section>
  </main>
</template>

<script setup lang="ts">
  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
  import Right from './components/Right.vue';
  import UseFooter from './components/useFooter.vue';
  const px = ref(200);
  const props = defineProps({
    isPackUp: {
      type: Boolean,
    },
  });
  const emit = defineEmits(['update:isPackUp']);
  const packUp = () => {
    emit('update:isPackUp', !props.isPackUp);
  };
  watch(
    () => props.isPackUp,
    (val) => {
      val ? (px.value = 48) : (px.value = 200);
      sessionStorage.setItem('isPackUp', String(props.isPackUp));
    },
    { immediate: true }
  );
</script>

<style scoped>
  .box {
    width: calc(100% - v-bind(px + 'px'));
    transition: width 0.2s ease;
  }
  .item {
    @apply hover:bg-gray-200 cursor-pointer h-full;
  }
  .box :deep(.action) {
    vertical-align: 0 !important;
  }
  .dark-icon {
    @apply dark:(text-light-100 hover:bg-[#242424]);
  }
  :deep(.ant-tabs) {
    height: 32px !important;
  }
  :deep(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active),
  :deep(.ant-tabs-tab-btn) {
    height: 30px;
    font-size: 12px;
  }
  :deep(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab) {
    height: 30px;
    font-size: 12px;
  }
  :deep(.ant-tabs-bar) {
    margin: 0;
  }
  :deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
    height: 32px;
    @apply dark:(bg-[#151515] border-[#303030] text-light-900);
  }

  :deep(.ant-tabs-nav-wrap) {
    height: 32px;
  }
  :deep(.ant-tabs-tab > div, .ant-tabs-tab-active > div) {
    line-height: 30px;
  }
  :deep(.ant-tabs-tab-active) {
    @apply !bg-blue-700;
  }

  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn),
  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
    @apply text-white !m-0;
  }
  :deep(.ant-tabs-tab) {
    @apply min-w-[81px] max-w-[120px] flex items-center justify-center gap-1;
  }
  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove),
  :deep(.ant-tabs-tab .ant-tabs-tab-remove) {
    @apply !p-0 !m-0;
  }

  :deep(.ant-tabs-tab-active:hover svg) {
    color: #fff;
    transition: color 0.3s;
  }
</style>
